<template>
  <div class="nur-doc-sheet">
    <div style="display: flex;justify-content: end;margin: 20px">
      <el-date-picker
        clearable
        v-model="queryDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      />

      <el-button
        style="font-size:15px;margin-left: 20px;width: 70px"
        type="primary"
        size="small"
        @click="query"
      >查询
      </el-button>
    </div>
    <h2 style="width: 100%; text-align: center">
      护理记录单
    </h2>
    <el-table
      ref="mainTable"
      :data="dataArray"
      :stripe="true"
      style="width: 100%;"
      :header-cell-style="{  background: '#F5F7FA',  color: '#606266',          }"
      height="600"
      lazy
    >
      <el-table-column label="日期" prop="date" width="100" align="center" fixed/>
      <el-table-column label="时间" prop="time" width="60" align="center" fixed/>
      <el-table-column label="意识" prop="consciousness" align="center"/>
      <el-table-column label="瞳孔" align="center" header-align="center">
        <el-table-column label="左" align="center" header-align="center">
          <el-table-column label="大小mm" align="center" header-align="center" prop="pupilSizeLeft"/>
          <el-table-column label="反应" align="center" header-align="center" prop="pupilResponseLeft"/>
        </el-table-column>
        <el-table-column label="右" align="center" header-align="center">
          <el-table-column label="大小mm" align="center" header-align="center" prop="pupilSizeRight"/>
          <el-table-column label="反应" align="center" header-align="center" prop="pupilResponseRight"/>
        </el-table-column>
      </el-table-column>

      <el-table-column
        label="生命体征"
        width="auto"
        align="center"
        header-align="center"
      >
        <el-table-column :label="'体温\n(℃)'" align="center" width="50">
          <template slot-scope="scope">
            <span>
                <summary-style :filed-name="scope.row.template"></summary-style>
              </span>
          </template>
        </el-table-column>
        <el-table-column :label="'心率\n(次/分)'" align="center" width="70">
          <template slot-scope="scope">
            <span>
                <summary-style :filed-name="scope.row.hr"></summary-style>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="脉博(次/分)" align="center" width="70">
          <template slot-scope="scope">
            <span>
                <summary-style :filed-name="scope.row.pulse"></summary-style>
              </span>
          </template>
        </el-table-column>
        <el-table-column label="呼吸(次/分)" align="center" width="70">
          <template slot-scope="scope">
            <span>
                <summary-style :filed-name="scope.row.br"></summary-style>
              </span>
          </template>
        </el-table-column>
        <el-table-column label="有创血压(mmHg)" align="center" width="80">
          <template slot-scope="scope">
            <span>
                <summary-style :filed-name="scope.row.abp"></summary-style>
              </span>
          </template>
        </el-table-column>
        <el-table-column label="无创血压(mmHg)" align="center" width="80">
          <template slot-scope="scope">
            <span>
                <summary-style :filed-name="scope.row.nbp"></summary-style>
              </span>
          </template>
        </el-table-column>
        <el-table-column label="SpO₂(%)" align="center" width="50">
          <template slot-scope="scope">
            <span>
                <summary-style :filed-name="scope.row.spO2"></summary-style>
              </span>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column
        label="循环系统"
        width="auto"
        align="center"
        header-align="center"
      >
        <el-table-column label="心律" prop="heartRhythm" align="center" width="50">
        </el-table-column>
        <el-table-column :label="'CVP\n(cmH₂O)'" align="center" width="70">
          <template slot-scope="scope">
            <summary-style :filed-name="scope.row.cvp"></summary-style>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column
        label="呼吸系统"
        width="auto"
        align="center"
        header-align="center"
      >
        <el-table-column :label="'吸氧/\n通气方式'" prop="oxygenMode" align="center" width="80"/>
        <el-table-column :label="'氧流量\n(L/min)'" prop="oxygenFlow" align="center" width="80"/>
        <el-table-column label="MODE" prop="mode" align="center" width="80"/>
        <el-table-column :label="'FiO2\n(%)'" prop="fio2" align="center" width="70"/>
        <el-table-column :label="'VT\n(ml)'" prop="vt" align="center" width="70"/>
        <el-table-column :label="'F\n(次/分)'" prop="f" align="center" width="70"/>
        <el-table-column :label="'PC\n(cmH₂O)'" prop="pc" align="center" width="70"/>
        <el-table-column :label="'PS\n(cmH₂O)'" prop="ps" align="center" width="70"/>
        <el-table-column :label="'PEEP\n(cmH₂O)'" prop="peep" align="center" width="80"/>
        <el-table-column :label="'IPAP\n(cmH₂O)'" prop="ipap" align="center" width="70"/>
        <el-table-column label="EPAP(cmH₂O)" prop="epap" align="center" width="80"/>
        <el-table-column label="吸痰" align="center" width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.sputum ? '✔' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="痰液分度" prop="sputumInde" align="center" width="60"/>
      </el-table-column>

      <el-table-column
        :label="'血糖\n(mmol/L)'"
        align="center"
        :resizable="false"
        width="80"
      >
        <template slot-scope="scope">
          <summary-style :filed-name="scope.row.bloodGlucose"></summary-style>
        </template>
      </el-table-column>
      <el-table-column label="翻身" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.nurseActivity ? '✔' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="体位" prop="bodyPosition" width="100" align="center"/>

      <el-table-column label="护理" align="center">
        <el-table-column :label="'措施'" prop="nurseMeasure" width="120" align="center"/>
        <el-table-column label="皮肤" prop="nurseSkin" width="120" align="center"/>
      </el-table-column>

      <el-table-column
        label="导管"
        align="center"
        header-align="center"
        width="200"
      >
        <template slot-scope="scope">
          <div style="text-align: left; white-space: pre-line">
            {{ isNullEmpty(scope.row.pipeLength) ? scope.row.pipeLength : scope.row.pipeLength.replace(/;/g, "\n") }}
          </div>
        </template>
      </el-table-column>

      <el-table-column :label="'管路情况'" prop="pipeReuse" align="center"/>
      <el-table-column label="药物内容" prop="medicineContent" align="center" header-align="center" width="200"/>
      <el-table-column
        label="入量ml"
        align="center"
        header-align="center"
      >
        <el-table-column label="鼻饲/口服" align="center" header-align="center" width="90">
          <template slot-scope="scope">
            <span> {{ scope.row.noseMouth | numFilter }}  </span>
          </template>
        </el-table-column>
        <el-table-column label="静脉" align="center" width="90">
          <template slot-scope="scope">
            <span>  {{ scope.row.intravenous | numFilter }}  </span>
          </template>
        </el-table-column>
        <el-table-column label="其它" align="center" width="90">
          <template slot-scope="scope">
            <span> {{ scope.row.otherInNum | numFilter }}  </span>
          </template>
        </el-table-column>
        <el-table-column label="总入量" align="center" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.totalAmount | numFilter }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="出量ml" align="center" header-align="center">
        <el-table-column label="小便" align="center" header-align="center" width="80">
          <template slot-scope="scope">
            <span> {{ scope.row.urine | numFilter }} </span>
          </template>
        </el-table-column>
        <el-table-column label="大便" align="center" header-align="center" width="80">
          <template slot-scope="scope">
            <span>  {{ scope.row.excrement | numFilter }}  </span>
          </template>
        </el-table-column>
        <el-table-column
          label="其它"
          align="center"
          header-align="center"
          width="100"
        >
          <template slot-scope="scope">
            <div   style="text-align: left; white-space: pre-line" >
              {{ isNullEmpty(scope.row.otherOutNum) ? ' ' : scope.row.otherOutNum.replace(/;/g, "\n") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="总出量" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.outputAmount | numFilter }}</span>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="病情观察、治疗、护理措施及效果" prop="result" align="center" width="200"/>
      <el-table-column label="护士签名" align="center" width="80">
        <template slot-scope="scope">
          <span>
              <img
                :src="'/images/' + scope.row.signWorkNo.trim() + '.png'"
                style="width: 50px;height: 25px"
                v-if="!isNullEmpty(scope.row.signWorkNo)"
              >
            </span>
        </template>
      </el-table-column>
      <el-table-column label="接班签名" align="center" width="80">
        <template slot-scope="scope">
          <span>
              <img
                :src="'/images/' + scope.row.successorWorkNo.trim() + '.png'"
                style="width: 50px;height: 25px"
                v-if="!isNullEmpty(scope.row.successorWorkNo)"
              >
            </span>
        </template>
      </el-table-column>
    </el-table>

    <nursingPrompt :codeList="codeList"></nursingPrompt>
  </div>
</template>

<script>
import nursingPrompt from "@/views/nursingDocument/combinedSheetPrompt.vue";
import {getCombinedCodeList, getNursingRecordListByVisitCode} from "@/api/table";
import {Message} from "element-ui";
import {dateCompare, isNullEmpty} from "@/utils/utils";
import SummaryStyle from "@/views/nursingDocument/summaryStyle";

export default {
  components: {
    SummaryStyle,
    nursingPrompt,
  },
  props: {},
  data() {
    return {
      visitCode: '',
      queryDate: [],
      dataArray: [],
      codeList: {}, //全部下拉选项字典
    };
  },
  created() {
    this.visitCode = this.$route.query.visitCode;
    if (this.visitCode == null || this.visitCode == '') {
      Message({message: "患者住院号不能为空！", type: "warning"});
    } else {
      getNursingRecordListByVisitCode({
        visitCode: this.visitCode,
        startTime: '',
        hour: ''
      }).then((res) => {
        this.dataArray = res.data;
      });

      getCombinedCodeList().then((res) => {
        if (res.code == 200 && res.data != null) {
          this.codeList = res.data;
        }
      });
    }
  },
  //过滤小数点后面的数
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      if (value == 0 || value == "" || value == null) {
        return "";
      } else {
        let newstr = value;
        let leng = value.length - value.indexOf(".") - 1;
        if (value.indexOf(".") > -1) {
          for (let i = leng; i > 0; i--) {
            if (
              newstr.lastIndexOf("0") > -1 &&
              newstr.substr(newstr.length - 1, 1) == 0
            ) {
              let k = newstr.lastIndexOf("0");
              if (newstr.charAt(k - 1) == ".") {
                return newstr.substring(0, k - 1);
              } else {
                newstr = newstr.substring(0, k);
              }
            } else {
              return newstr;
            }
          }
        }
        return value;
      }
    },
  },
  methods: {
    query() {
      if (this.queryDate.length == 0) {
        Message({message: "开始和结束时间不能为空!", type: "warning"});
        return;
      }
      if (dateCompare(this.queryDate[0], this.queryDate[1])) {
        Message({message: "开始时间必须小于结束时间!", type: "warning"});
        return;
      }

      let startDateTime = this.queryDate[0] + " 07:00:00";
      let endDateTime = this.queryDate[1] + " 07:00:00";
      let startDate = new Date(startDateTime).getTime();
      let endDate = new Date(endDateTime).getTime();
      let hours = Math.ceil((endDate - startDate) / (1000 * 3600));

      getNursingRecordListByVisitCode({
        visitCode: this.visitCode,
        startTime: startDateTime,
        hour: hours
      }).then((res) => {
        this.dataArray = res.data;
      });
    },
    isNullEmpty(data){
      return isNullEmpty(data)
    },
  }
}
</script>
